<template>
	<view id="point-apply">
		<v-title>{{titleType == 1? $lang('Apply.pointsToU'): $lang('Apply.uAgainstInventoryPoints')}}</v-title>
		<header-back :headerTitle="titleType == 1? $lang('Apply.pointsToU'): $lang('Apply.uAgainstInventoryPoints')"></header-back>
		
		<view class="content-apply">
			<view class="apply-row">
				<view class="h3">
          {{ $lang('Apply.exchangeRate') }}： {{titleType == 1? '1 CLP= '+(exchangeObj.redcredit_to_usdt_fee || 0)+'USDT': '1 USDT='+(exchangeObj.usdt_to_stockcredit_fee || 0) + $lang('Apply.inventoryPoints')}}</view>
				<view class="row-box">
					<image src="/static/icon/icon_dui_01.png" class="dui-icon" mode=""></image>
					<view class="row-wrap">
						<view class="row-l" v-if="titleType == 1">
							<image src="/static/icon/picresour_icon_01.png" class="icon-l" mode=""></image>
							<view class="row-name">CLP</view>
						</view>
						<view class="row-l">
							<image src="/static/icon/picresour_icon_02.png" class="icon-l" mode=""></image>
							<view class="row-name">USDT</view>
						</view>
						<view class="row-l" v-if="titleType == 2">
							<image src="/static/icon/picresour_icon_01.png" class="icon-l" mode=""></image>
							<view class="row-name">{{ $lang('Apply.inventoryPoints') }}</view>
						</view>
					</view>
					<view class="row-wrap">
						<view class="row-l">
							<input type="digit" v-model="formObj.money" @input="handleMoney()" :placeholder="$lang('Apply.numberOfExchanges')" placeholder-style="color:#BBC0CB" />
						</view>
						<view class="row-l">
							<view class="row-text">{{showCount?showCount: $lang('Apply.numberOfExchangesUntil') }}</view>
						</view>
					</view>
				</view>
				<view class="row-count">
					<view class="count-num">
            {{titleType == 1? $lang('Apply.availableCLP')+'：'+(userInfo.red_credit || 0): $lang('Apply.availableUSDT')+'：'+(userInfo.balance || 0)}}</view>
					<text class="count-all" @click="getAll()">{{ $lang('Apply.redeemAll') }}</text>
				</view>
				<view class="" >
					<view class="row-item">
						<view class="h6">{{ $lang('Apply.taxes') }}</view>
						<view class="h6">{{exchangeObj.redcredit_to_usdt_tax_fee}}%</view>
					</view>
					<view class="row-item">
						<view class="h6">{{ $lang('Apply.handlingFee') }}</view>
						<view class="h6">{{exchangeObj.redcredit_to_usdt_handling_fee}}%</view>
					</view>
					<!-- <view class="row-item">
						<view class="h6">到账数量</view>
						<view class="h6">0.0000 USDT</view>
					</view> -->
				</view>
			</view>
			
			<view class="applt-footer">
				<Button :btnText="titleType == 1?  $lang('Apply.pointsToU'): $lang('Apply.uAgainstInventoryPoints') "  @btnClick="onSubmit" ></Button>
			</view>
			
		</view>
		
		
		<!-- 支付密码 -->
		<uni-popup ref="surePopup" type="center" :maskClick="false">
			<view class="tran-popup">
				<view class="popup-top">
					<view></view>
					<view class="popup-title">{{ $lang('Apply.paymentPassword') }}</view>
					<view></view>
				</view>
				<view class="popup-pas">
					<input type="password" v-model="formObj.pay_password" placeholder-style="color: #BBC0CB;" :placeholder="$lang('Apply.pleaseEnterPaymentPassword')" />
				</view>
				<view class="popup-footer">
					<view class="btn" @click.stop="closeFn()">{{ $lang('common.cancel') }}</view>
					<view class="btn btn-act" @click="submitFn()">{{ $lang('common.confirm') }}</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import headerBack from '@/components/headerBack.vue'
	import Button from '@/components/buttom.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	data() {
		return {
			titleType: 1,
			password: '',
			userInfo: {},
			exchangeObj: {},
			// from_type = usdt ， to_type = stock_credit USDT兑换成库存积分
			// from_type = red_credit ， to_type = usdt 红积分兑换成USDT
			formObj: {
				from_type: 'usdt', 
				to_type: 'stock_credit',
				money: '',
				pay_password: '',
			},
			showCount: 0,
		};
	},
	onLoad(e) {
		this.titleType = e.type;
		if(this.titleType == 1){
			this.formObj.from_type = 'red_credit',
			this.formObj.to_type = 'usdt';
		}
		this.getMemberInfo();
		this.getExchange();
    // this.$langConfig.refresh();
    console.log(this.$lang('Apply.pointsToU'));
  },
	components: {
		headerBack,
		Button,
		uniPopup
	},
	onShow() {

	},
	methods: {
		// 处理显示兑换数量
		handleMoney(){
			if(this.formObj.money && Number(this.formObj.money) > 0){
				if(this.titleType == 1){
					this.showCount =  this.$util.numMulti(Number(this.formObj.money),this.exchangeObj.redcredit_to_usdt_fee) 
				}else {
					this.showCount = this.$util.numMulti(Number(this.formObj.money),this.exchangeObj.usdt_to_stockcredit_fee);
				}
			}else {
				this.showCount = 0;
			}
		},
		getAll(){
			this.formObj.money = this.titleType == 1? this.userInfo.red_credit : this.userInfo.balance;
			this.handleMoney()
		},
		// 获取会员基础信息
		async getMemberInfo() {
			let res = await this.$api.sendRequest({
				url: '/api/member/info',
				async: false
			});
			if (res.code >= 0 && res.data) {
				this.userInfo = res.data;
				uni.setStorageSync('userInfo', this.memberInfo);
			} 
		},
		// 获取兑换详情
		getExchange(){
			this.$api.sendRequest({
				url: '/api/wallet/exchangeIndex',
				method: 'post',
				success:res=>{
					if(res.code == 0){
						this.exchangeObj = res.data;
					}
				}
			})
		},
		// 关闭
		closeFn(){
			this.formObj.pay_password = '';
			this.$refs.surePopup.close();
		},
		// 点击兑换后显示弹框
		onSubmit(){
			if(!this.formObj.money){
				return this.$util.showToast({title: this.$lang('condition.pleaseEnterTheExchangeAmount')})
			}
			let count = this.titleType == 1? this.userInfo.red_credit : this.userInfo.balance;
			if(Number(this.formObj.money) > Number(count)){
				return this.$util.showToast({title: this.$lang('condition.greaterThanAvailableBalance')})
			}
			this.$refs.surePopup.open();
		},
		submitFn(){
			if(!this.formObj.pay_password){
				return this.$util.showToast({title: this.$lang('condition.pleaseEnterThePassword')})
			}
			uni.showLoading({
				mask: true,
				title: 'Loading...'
			})
			// return console.log(JSON.stringify(this.formObj))
			this.$api.sendRequest({
				url: '/api/wallet/exchange',
				data: this.formObj,
				method: 'post',
				success: res=>{
					uni.hideLoading()
					if(res.code == 0){
						this.$util.showToast({title: this.$lang('condition.successfulRedemption')})
						let cid = res.data.id;
						setTimeout(()=>{
							this.$refs.surePopup.close();
							uni.redirectTo({
								url: `/pages/member/blance/points/data?type=${this.titleType}&cid=${cid}`
							})
						},1500)
					}else {
						this.$util.showToast({title: res.message})
					}
				}
			})
			
		},
	}
};
</script>

<style scoped lang="scss">
	.content-apply {
		padding: 36rpx 32rpx 0px;
		box-sizing: border-box;
	}
	.apply-row {
		width: 100%;
		background: #fff;
		border-radius: 10rpx;
		padding: 28rpx 34rpx 0px;
		box-sizing: border-box;
		.h3 {
			font-size: 26rpx;
			font-weight: 600;
			color: #31bb6d;
			line-height: 40rpx;
			// margin-bottom: 52rpx;
		}
		.row-box {
			width: 100%;
			position: relative;
			.dui-icon {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
			.row-wrap {
				width: 100%;
				padding-top: 52rpx;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #E8EDF5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.row-l {
					display: flex;
					align-items: center;
					.icon-l {
						width: 48rpx;
						height: 48rpx;
					}
					input {
						font-size: 36rpx;
						color: #282828;
					}
					.row-name {
						margin-left: 22rpx;
						font-size: 36rpx;
						font-weight: 600;
						color: #282828;
					}
					.row-text {
						font-size: 36rpx;
						color: #BBC0CB;
					}
				}
			}
		}
		
		.row-count {
			padding: 36rpx 0px 52rpx;
			display: flex;
			align-items: center;
			.count-num {
				font-size: 24rpx;
				font-weight: 600;
				color: #282828;
			}
			.count-all {
				font-size: 24rpx;
				font-weight: 600;
				color: #31bb6d;
				margin-left: 24rpx;
			}
		}
		
		.row-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.h6 {
				font-size: 28rpx;
				color: #282828;
				line-height: 40rpx;
				margin-bottom: 16rpx;
			}
		}
	}
	
	.applt-footer {
		padding-top: 44rpx;
		.btn {
			border-radius: 44rpx;
		}
	}
	
	
	.tran-popup {
		width: 600upx;
		background: #fff;
		border-radius: 16upx;
		padding: 40upx 30upx 20px;
		box-sizing: border-box;
		.popup-top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 34upx;
			.popup-title {
				font-size: 36upx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #292929;
			}
			.arrow-icon {
				width: 36upx;
				height: 36upx;
			}
		}
		
		.popup-pas {
			width: 100%;
			height: 100upx;
			// border: 2upx solid #393873;
			background: #F2F3F5;
			padding: 0px 26upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 32upx;
			color: #292929;
			border-radius: 10upx;
			margin-bottom: 40upx;
		}
		
		.popup-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn {
				width: 260upx;
				height: 88upx;
				border-radius: 16upx;
				background: #CCD0D8;
				font-size: 34upx;
				color:#fff;
				font-family: Helvetica-Bold, Helvetica;
				font-weight: bold;
				@include flexCenter;
			}
			.btn-act {
				background: #31bb6d;
				color: #fff;
			}
		}
	}
	
</style>
